<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Banner</title>
		<link href="css/index.css" rel="stylesheet" />
	</head>
	<body>
		<div class="bili-banner">
			<div class="animated-banner">
				<!-- 背景 -->
				<div class="layer">
					<img 
						src="image/bg1.png" 
						data-height="360" data-width="9666" height="180" width="4833" 
						style="transform: scale(1) translate(0px, -15px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 左山 -->
				<div class="layer">
					<img 
						src="image/bg2.png" 
						data-height="360" data-width="9666" height="180" width="4833" 
						style="transform: scale(1) translate(1100px, 0px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 右山 -->
				<div class="layer">
					<img 
						src="image/bg3.png"
						data-height="360" data-width="3523" height="162" width="1585"
						style="transform: scale(1) translate(675px, 0px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 左桥 -->
				<div class="layer">
					<img 
						src="image/bg4.png"
						data-height="360" data-width="2938" height="176" width="1439"
						style="transform: scale(1) translate(-637px, 0px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 右船 -->
				<div class="layer">
					<img 
						src="image/bg5.png"
						data-height="139" data-width="556" height="62" width="250"
						style="transform: scale(1) translate(607.5px, 45px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 开船人物 -->
				<div class="layer">
					<img 
						src="image/p4.png"
						data-height="302" data-width="734" height="84" width="205"
						style="transform: scale(1) translate(252px, 36.4px) rotate(0deg); opacity: 0;"
					>
				</div>
				<!-- 中草坪+树 -->
				<div class="layer">
					<img 
						src="image/bg6.png"
						data-height="180" data-width="1757" height="125" width="1229"
						style="transform: scale(1) translate(112px, 25px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 中草坪+风筝 -->
				<div class="layer">
					<img 
						src="image/bg7.png"
						data-height="116" data-width="1757" height="81" width="1229"
						style="transform: scale(1) translate(-350px, 49px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 人物 -->
				<div class="layer">
					<img 
						src="image/p2.png"
						data-height="346" data-width="497" height="138" width="198"
						style="transform: scale(1) translate(-240px, 16px) rotate(0deg); opacity: 0;"
					>
				</div>
				<!-- 人物 -->
				<div class="layer">
					<img 
						src="image/p1.png"
						data-height="256" data-width="146" height="102" width="58"
						style="transform: scale(1) translate(-340px, 32px) rotate(0deg); opacity: 0;"
					>
				</div>
				<!-- 中树 -->
				<div class="layer">
					<img 
						src="image/t1.png"
						data-height="254" data-width="602" height="114" width="270"
						style="transform: scale(1) translate(-90px, 13.5px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 中草坪+树 -->
				<div class="layer">
					<img 
						src="image/bg8.png"
						data-height="360" data-width="4277" height="180" width="2138"
						style="transform: scale(1) translate(100px, 0px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 中人物 -->
				<div class="layer">
					<img 
						src="image/p3.png"
						data-height="327" data-width="933" height="147" width="419"
						style="transform: scale(1) translate(216px, 13.5px) rotate(0deg); opacity: 1;"
					>
				</div>
				<!-- 右树 -->
				<div class="layer">
					<img 
						src="image/t3.png"
						data-height="353" data-width="740" height="211" width="444"
						style="transform: scale(1) translate(2100px, 0px) rotate(0deg); filter: blur(2px); opacity: 1;"
					>
				</div>
				<!-- 左树 -->
				<div class="layer">
					<img 
						src="image/t2.png"
						data-height="360" data-width="1916" height="180" width="958"
						style="transform: scale(1) translate(-1000px, 0px) rotate(0deg); filter: blur(1px); opacity: 1;"
					>
				</div>
				<canvas width="1519" height="155" style="position: absolute; top: 0px; left: 0px;" id="canvas"></canvas>
			</div>
		</div>
	</body>
	<script src="js/index.js"></script>
	<script src="js/canvas.js"></script>
	<script>
		let timer = null;
		window.onload = ()=>{
			loading();
		}
		function start(){
			timer = setInterval(begin,1000/60)
		}
		function begin(){
			ctx.clearRect(0,0,sw,sh);
			createFlower();
			allDraw();
		}
	</script>
</html>
